<template>
  <div>
     <header class="header">
        <div class="title">
          <div>通讯录</div>
        </div>
    </header>
    <div class="nices"></div>
    <div class="list" v-for="(item,index) in list" :key="index">
      <div class="list_box">
        <div class="gv">
          <div class="gvment">{{item.mc}}</div>
          <div class="people_flex" v-if="item.numBer!=0" @click="nextgo(item.dwid,item.mc)">
            <div>
              <img class="people" src="../assets/images/people.png" alt />
            </div>
            <div class="num">{{item.numBer}}</div>
          </div>
        </div>
        <div class="list_box_two">
          <div class="list_box_three">
          <a :href="'tel:'+item.dhBai" v-if="item.dhBai!=0">
              <div style="display:flex">
              <div>
                <img class="icon" src="../assets/images/zheng.png" alt />
              </div>
              <div class="number">{{item.dhBai}}</div>
            </div>
            </a>
          </div>
         <a :href="'tel:'+item.dhWan" v-if="item.dhWan!=0">
            <div class="list_box_four">
            <div>
              <img class="icon" src="../assets/images/zhi.png" alt />
            </div>
            <div class="number">{{item.dhWan}}</div>
            </div>
         </a>
        </div>
      </div>
    </div>
    <div class="bottoms"></div>
    <!-- <van-tabbar v-model="active" route>
      <van-tabbar-item to="/index" replace>
        <span>主页</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon.active : icon.inactive" />
      </van-tabbar-item>
      <van-tabbar-item to="/message" replace>
        <span>消息</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon2.active : icon2.inactive" />
      </van-tabbar-item>
      <van-tabbar-item to="/address" replace>
        <span>通讯</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon3.active: icon3.inactive" />
      </van-tabbar-item>
      <van-tabbar-item to="/me" replace>
        <span>我</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon4.active: icon4.inactive" />
      </van-tabbar-item>
    </van-tabbar> -->
     <Tabbar></Tabbar>
  </div>
</template>
<script>
import Header from "../components/header";
import Tabbar from "../components/tabbar";

export default {
  data() {
    return {
      active: 0,
      icon: {
        active: require("../assets/images/tabbar_home_active.png"),
        inactive: require("../assets/images/tabbar_home.png")
      },
      icon2: {
        active: require("../assets/images/tabbar_msg_active.png"),
        inactive: require("../assets/images/tabbar_msg.png")
      },
      icon3: {
        active: require("../assets/images/call_active.png"),
        inactive: require("../assets/images/call.png")
      },
      icon4: {
        active: require("../assets/images/tabbar_user_active.png"),
        inactive: require("../assets/images/tabbar_user.png")
      },
      list: [],
      number: ""
    };
  },
  components: {
    Header,
    Tabbar
  },
  created() {
    this.listArry();
  },
  mounted(){
      document.body.style.backgroundColor = 'white'
  },
  methods: {
    listArry() {
      this.axios
        //.get(this.$global_msg.Url.hosted + "/yzsafe-login-app/showdwphonelist")
         .get(this.$global_msg.Url.host + "/SearchScreen/selectCommunication")
        .then(res => {
          console.log(res);
          if(res.data.code == 200){
            this.list = res.data.rows;
            if(res.data.rows.length != 0){
                this.number = res.data.rows[0].id;
            }
          }else{
            this.$toast(res.data.msg)
          }
        }).catch( err=>{
            this.$terminal._error(err)
        })
    },
    nextgo(id,mc) {
      console.warn(id)
      this.$router.push({
        path: '/street',
        query: { id,mc }
      });
    }
  }
};
</script>
<style scoped>
.van-tabbar {
  padding: 0.4rem 0;
}
.van-tabbar--fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  background: #ffffff;
}
.van-tabbar--fixed {
  border-top: 1px solid #cccccc;
  /* border: none; */
  padding-top: 0.8rem;
}
.van-tabbar-item {
  font-size: 0.44rem;
  line-height: 0.6rem;
}
.van-tabbar-item__icon img {
  display: block;
  height: 0.5333rem;
}
[class*="van-hairline"]::after {
  border: none;
}
.headerg {
  position: fixed;
  height: 1.8519rem;
  width: 100%;
  background: url("../assets/images/app_bg.png") no-repeat;
  background-size: 100% 100%;
}
.title_flex {
  display: flex;
  align-items: center;
  color: #ffffff;
  text-align: center;
}
.titg {
  width: 100%;
  text-align: center;
  line-height: 1.8519rem;
  font-size: 0.444444rem;
}
.Prev {
  width: 0.2778rem;
  height: 0.4815rem;
  margin-left: 0.2667rem;
  line-height: 2.4rem;
}


.header {
    height: 1.8519rem;
    background: url(../assets/images/home_bg.png) no-repeat;
    background-size: 100% 100%;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
.list:first-child {
  position: relative;
  top: 1.851852rem;
}
.list {
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 0.37037rem;
}

.list_box {
  margin-left: 0.37037rem;
}
.gvment {
  font-size: 0.444444rem;
  /* width: 3.603704rem; */
  overflow: hidden;
  /* border: 1px solid red; */
}
.number {
  font-size: 0.444444rem;
  margin-top: 0.037037rem;
  width: 4rem;
  /* border: 1px solid red; */
}
.list_box_two {
  display: flex;
  margin-top: 0.185185rem;
}
.list_box_three {
  display: flex;
}
.list_box_four {
  display: flex;
  margin-left: 0.740741rem;
}
.icon {
  width: 100%;
  height: 100%;
}
.people {
  width: 0.392593rem;
  height: 0.392593rem;
}
.gv {
  display: flex;
  padding-top: 0.37037rem;
}
.people_flex {
  display: flex;
  margin-left: 1rem;
}
.num {
  font-size: 0.37037rem;
  margin-left: 0.037037rem;
  margin-top: -0.074074rem;
}
.nices {
  padding-bottom: 1.851852rem;
}
.bottoms {
  margin-bottom:2rem;
}
</style>